<template>
    <div>
        <el-form ref="loginForm" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">
                系统登录
            </h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码">
                </el-input>
            </el-form-item>
            <el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>

<script>
    import {USER_LOGIN} from "@/api/system/"

    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: "",
                    password: "",
                },
            }
        },
        methods: {
            submitLogin() {
                let data = this.loginForm
                USER_LOGIN(data).then(res => {
                    if (res.data.code === 6001) {
                        sessionStorage.setItem("username", this.loginForm.username)
                        const loading = this.$loading({
                            lock: true,
                            text: 'Loading',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        setTimeout(() => {
                            loading.close();
                            this.$router.push({path: '/', query: {username: this.loginForm.username}})
                        }, 2000);
                        this.$message({
                            showClose: true,
                            message: "登录成功",
                            type: 'success'
                        });

                    } else if (res.data.code === 6003) {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: 'warning'
                        });

                    } else if (res.data.code === 6002) {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: 'warning'
                        });

                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.data,
                            type: 'warning'
                        });
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 150px auto;
        width: 550px;
        padding: 15px 35px 15px 35px;
        background: aliceblue;
        border: 1px solid blueviolet;
        box-shadow: 0 0 25px #f885ff;
    }

    .loginTitle {
        margin: 0px auto 48px auto;
        text-align: center;
        font-size: 40px;
    }

    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
</style>